<template>
  <div class="topic">
	  	<div class="title">
	  		<h1 >专题列表</h1>
	  	</div>
	  	<div class="content">
	  		<div class="layout" v-for="(item, i) in topics" :key="i">
		  		<topic-item v-on:deltopic="deltopic($event)"  class="item"  :data="item">
		  		</topic-item>
		  	</div>
		  	<div class="layout" v-show="topics.length<10">
		  		<div class="newbuild">
		  			<div class="bg" @click="addTopicList()">
		  				<img src="./img/add.png" alt="">
							<div>新建专题</div>
		  			</div>
		  		</div>
		  	</div>
	  	</div>
  </div>
</template>

<script>
import topicItem from './topicItem'
export default {
  name: 'topic',
  components:{topicItem},
  data() {
      return {
  		topics:[]
      }
    },
    mounted(){
    	this.getTopic()
    	this.$store.commit('LoadingTrue');
    },
    methods: {
			async getTopic(){
				let res
				try{
					res = await this.$http.get('/vrv-monitor-platform-web/topic/read/list')
				}catch(err){
					this.$message.error(err.body.message)
				}
				if(res.body.success==true){
					this.topics = res.body.data
				}else{
					this.$message.error(res.body.message)
				}
				this.$store.commit('Loadingfalse')
			},
      addTopicList:function(){
				if(this.topics.length > 9){
					this.$message.error('专题数量最多是十个')
					return false
				}
				window.open('#/topic/addTopic');
      },
      deltopic(e){
				this.topics = this.topics.filter(d=>d.id != e)
      }
    }
}
</script>
<style scoped>
	.topic{
		background: #fff;
		min-height: 100%;
		margin-right: 1.3rem;
		
	}
	.title {
		padding: 1.88rem;
		padding-bottom: 1.3rem;
	}
	.title h1{
		border-bottom: 1px solid #dcdcdc;
		padding-bottom: 0.85rem;
		font-size: 1.3rem;
		color: #555;
		letter-spacing: 0.5rem

	}

	.content{
		padding: 0 1.88rem 1.88rem 1.88rem;
		font-size: 0;
	
	}
	.content .layout{
		display: inline-block;
		width: 20%;
		text-align: left;
	}
	.newbuild{
		display: inline-block;
		margin-bottom: 2.8rem;
		width: 16.25rem;
		height: 22.5rem;
		border-radius: 5px;
		border:2px dashed #dcdcdc;
		background: #fff;
		overflow: hidden;
		box-sizing: border-box;
	}
	.bg{
		position: relative;
		text-align: center;
	}
	.bg img{
		display: inline-block;
		margin-top: 6rem;
		cursor: pointer;
	}
	.bg div{
		font-size: 18px;
		color:#a1a2ab;
		margin-top: 1.8rem;
	}
	.evens {
		padding: 3.12rem 3.75rem;
	}
	.layout{
		display: flex;
	}
	.evens .item{
		flex:1;
	}
	.chose{
		width: 100%;
		margin-top: 3.125rem;
		text-align: center;
	}
	.chose button:first-child{
		margin-right: 6.25rem;
	}
	.chose button{
		padding: 0.625rem 1.875rem;
	}
	.el-form{
		margin: 0 auto;
	}
	.el-date-editor{
		width: 100% !important;
	}
	@media screen and (max-width: 1580px) {
		.content .layout{
			width: 33%;
		}
	}
	@media screen and (max-width: 1150px) {
		.content .layout{
			width: 50%;
		}
	}

</style>
